<template>
   <!-- 弹窗组件 -->
   <div class="dialog-box">
      <el-dialog
         v-model="dialogVisible"
         title="新增人员"
         width="700"
      >
         <el-form
            :model="form"
            label-width="200px"
         >
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item
                     label="姓名"
                     required
                  >
                     <el-input
                        v-model="form.name"
                        placeholder="请输入"
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item
                     label="人员编号(登录账号)"
                     required
                  >
                     <el-input
                        v-model="form.level"
                        placeholder="唯一"
                     >
                     </el-input>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item
                     label="手机号(登录账号)"
                     required
                  >
                     <el-input
                        v-model="form.contact"
                        placeholder="请输入"
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item
                     label="邮箱"
                     required
                  >
                     <el-input
                        v-model="form.phone"
                        placeholder="请输入"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item label="性别">
                     <el-select
                        v-model="form.gender"
                        placeholder="请选择"
                     >
                        <el-option
                           label="男"
                           value="1"
                        />
                        <el-option
                           label="女"
                           value="2"
                        />
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="出生日期">
                     <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        placeholder="请选择"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item
                     label="角色"
                     required
                  >
                     <el-tree-select
                        clearable
                        v-model="value"
                        :data="data"
                        :render-after-expand="false"
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item
                     label="所属部门"
                     required
                  >
                     <el-tree-select
                        clearable
                        v-model="value"
                        :data="data"
                        :render-after-expand="false"
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="直属上级">
                     <el-input
                        v-model="form.superior"
                        @focus="handeleClick"
                        placeholder="请选择"
                        suffix-icon="MoreFilled"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="dialogVisible = false">取消</el-button>
               <el-button
                  color="#626aef"
                  @click="dialogVisible = false"
               >
                  确定
               </el-button>
            </div>
         </template>
      </el-dialog>
   </div>
   <Select_a_Superior
      ref="selectSuperiorRef"
      @selectPurchasingDirector="selectPurchasingDirector"
   />
</template>

<script setup lang="ts">
   import { ref, reactive } from "vue";
   import Select_a_Superior from "./Select_a_Superior.vue";
   // 接收父组件传入的值
   const props = defineProps({});
   const selectSuperiorRef = ref<any>(null);
   const dialogVisible = ref<boolean>(false);
   const form = reactive<any>({
      name: "",
      level: "",
      contact: "",
      phone: "",
      email: "",
      position: "",
      region: "",
      address: "",
      remark: "",
      superior: "",
   });
   const value = ref();

   const data = [
      {
         value: "1",
         label: "Level one 1",
         children: [
            {
               value: "1-1",
               label: "Level two 1-1",
               children: [
                  {
                     value: "1-1-1",
                     label: "Level three 1-1-1",
                  },
               ],
            },
         ],
      },
      {
         value: "2",
         label: "Level one 2",
         children: [
            {
               value: "2-1",
               label: "Level two 2-1",
               children: [
                  {
                     value: "2-1-1",
                     label: "Level three 2-1-1",
                  },
               ],
            },
            {
               value: "2-2",
               label: "Level two 2-2",
               children: [
                  {
                     value: "2-2-1",
                     label: "Level three 2-2-1",
                  },
               ],
            },
         ],
      },
      {
         value: "3",
         label: "Level one 3",
         children: [
            {
               value: "3-1",
               label: "Level two 3-1",
               children: [
                  {
                     value: "3-1-1",
                     label: "Level three 3-1-1",
                  },
               ],
            },
            {
               value: "3-2",
               label: "Level two 3-2",
               children: [
                  {
                     value: "3-2-1",
                     label: "Level three 3-2-1",
                  },
               ],
            },
         ],
      },
   ];
   // 打开选择直属上级弹窗
   const handeleClick = (e: any) => {
      selectSuperiorRef.value.openLoading();
      e.target.blur();
   };
   const openLoading = () => {
      dialogVisible.value = true;
   };
   // 选择直属上级
   const selectPurchasingDirector = (row: any) => {
      form.superior = row.name;
   };
   const handleSubmit = () => {
      // TODO: 处理表单提交
      dialogVisible.value = false;
   };

   defineExpose({
      openLoading,
   });
</script>

<style lang="scss" scoped>
   ::v-deep .el-dialog {
      --el-dialog-padding-primary: 0px;
   }
   ::v-deep .el-dialog__header {
      padding: 10px 16px;
      border-bottom: 1px solid #f0f0f0;
      font-weight: bold;
   }
   ::v-deep .dialog-footer {
      padding: 10px 16px;
      border-top: 1px solid #f0f0f0;
   }
   ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #000;
   }
   ::v-deep .el-dialog__body {
      padding: 10px 10px;
   }
   :deep(.el-form-item__label) {
      justify-content: flex-start;
   }
   :deep(.el-form-item) {
      flex-direction: column;
      margin-bottom: 7px;
   }
   :deep(.el-select__wrapper) {
      background: #fafcfb;
   }
   :deep(.el-badge__content.is-fixed) {
      color: #666;
      border-radius: 3px;
      padding: 4px;
   }
   :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
      width: 100%;
   }
   :deep(.el-button:hover) {
      color: #6860ff;
      background: #f4f5f7;
   }
   :deep(.el-input__wrapper.is-focus) {
      box-shadow: 0 0 0 1px #6860ff;
   }
   :deep(.el-select__wrapper.is-focused) {
      box-shadow: 0 0 0 1px #6860ff !important;
   }
   .supply-products {
      margin-top: 20px;
      .title {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 16px;
         font-weight: bold;
         .title-text {
            display: flex;
            align-items: center;
            .line {
               height: 17px;
               width: 2px;
               border-radius: 12px;
               margin-right: 8px;
               background-color: #6860ff;
            }
         }
      }
   }
   .image-list {
      display: flex;
      gap: 8px;
      .el-image {
         width: 40px;
         height: 40px;
         border-radius: 4px;
      }
   }
</style>
